<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>聊天界面</title>
    <!-- 引入CSS文件 -->
    <link rel="stylesheet" href="css/websocket-style.css">
    <!-- 引入Showdown库 -->
    <script src="https://cdn.jsdelivr.net/npm/showdown@1.9.1/dist/showdown.min.js"></script>
</head>

<body>
<div class="chat-container">
    <!-- 顶部提示 -->
    <div class="model-selector">
        <span>星火AI WebSocket连接</span>
    </div>

    <!-- 聊天内容区域 -->
    <div class="chat-box" id="chat-box"></div>

    <!-- 输入框和发送按钮 -->
    <div class="input-container">
        <textarea id="message" placeholder="请输入您的问题..." rows="3"></textarea>
        <button id="send-btn" onclick="sendMessage()">发送(S)</button>
        <!-- 合并为一个按钮 -->
        <button id="ws-toggle-btn" onclick="toggleWebSocket()">关闭连接</button>
    </div>

    <!-- WebSocket状态消息 -->
    <div class="status-message" id="status-message">
        WebSocket连接已开启
    </div>
</div>

<!-- 引入JavaScript文件 -->
<script src="js/websocket.js"></script>
</body>

</html>
